{% extends "base/base.html" %}

{% block title %}人员管理 - 项目合作归属数据管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-person-badge"></i> 人员管理</h2>
        <p class="text-muted">管理项目负责人信息，包括职务分配、项目关联等</p>
    </div>
</div>

<!-- 搜索表单 -->
<div class="search-form">
    <form method="GET" class="row g-3">
        <div class="col-md-3">
            <label class="form-label">姓名</label>
            <input type="text" class="form-control" name="search_name" value="{{ search_name }}" placeholder="请输入姓名">
        </div>
        <div class="col-md-3">
            <label class="form-label">职务</label>
            <select class="form-select" name="search_position">
                <option value="">全部职务</option>
                {% for position in positions %}
                <option value="{{ position }}" {% if search_position == position %}selected{% endif %}>{{ position }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label">是否总经理</label>
            <select class="form-select" name="search_is_manager">
                <option value="">全部</option>
                <option value="true" {% if search_is_manager == 'true' %}selected{% endif %}>是</option>
                <option value="false" {% if search_is_manager == 'false' %}selected{% endif %}>否</option>
            </select>
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button type="submit" class="btn btn-primary me-2">
                <i class="bi bi-search"></i> 搜索
            </button>
            <a href="{{ url_for('staff.staff_management') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-clockwise"></i> 重置
            </a>
        </div>
    </form>
</div>

<!-- 操作工具栏 -->
<div class="row mb-3">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addStaffModal">
                    <i class="bi bi-plus-circle"></i> 添加人员
                </button>
                <button type="button" class="btn btn-danger batch-operation-btn" onclick="batchDelete()" disabled>
                    <i class="bi bi-trash"></i> 批量删除
                </button>
            </div>
            <div>
                <a href="#" class="btn btn-outline-primary" onclick="exportStaff()">
                    <i class="bi bi-download"></i> 导出数据
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 人员列表 -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 data-table">
                <thead>
                    <tr>
                        <th width="40">
                            <input type="checkbox" class="form-check-input" id="selectAllCheckbox" onchange="toggleSelectAll(this)">
                        </th>
                        <th>姓名</th>
                        <th>所属项目</th>
                        <th>职务</th>
                        <th>具体职务</th>
                        <th>项目级别</th>
                        <th>电话</th>
                        <th>总经理</th>
                        <th>项目创建时间</th>
                        <th width="150">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for staff in staff_list.items %}
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input" name="selected_items" value="{{ staff.id }}" onchange="updateBatchButtons()">
                        </td>
                        <td>{{ staff.name }}</td>
                        <td>{{ staff.project_name or '-' }}</td>
                        <td>{{ staff.position or '-' }}</td>
                        <td>{{ staff.specific_position or '-' }}</td>
                        <td>
                            {% if staff.project_level %}
                                <span class="badge bg-info">{{ staff.project_level }}</span>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ staff.phone or '-' }}</td>
                        <td>
                            {% if staff.is_general_manager %}
                                <span class="badge bg-success">是</span>
                            {% else %}
                                <span class="badge bg-secondary">否</span>
                            {% endif %}
                        </td>
                        <td>{{ staff.project_create_time.strftime('%Y-%m-%d') if staff.project_create_time else '-' }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" 
                                        onclick="editStaff({{ staff.id }})" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#editStaffModal">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" 
                                        onclick="deleteStaff({{ staff.id }})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 分页 -->
{% if staff_list.pages > 1 %}
<nav class="mt-4">
    <ul class="pagination justify-content-center">
        {% if staff_list.has_prev %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('staff.staff_management', page=staff_list.prev_num, search_name=search_name, search_position=search_position, search_is_manager=search_is_manager) }}">上一页</a>
        </li>
        {% endif %}
        
        {% for page_num in staff_list.iter_pages() %}
            {% if page_num %}
                {% if page_num != staff_list.page %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('staff.staff_management', page=page_num, search_name=search_name, search_position=search_position, search_is_manager=search_is_manager) }}">{{ page_num }}</a>
                </li>
                {% else %}
                <li class="page-item active">
                    <span class="page-link">{{ page_num }}</span>
                </li>
                {% endif %}
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">…</span>
                </li>
            {% endif %}
        {% endfor %}
        
        {% if staff_list.has_next %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('staff.staff_management', page=staff_list.next_num, search_name=search_name, search_position=search_position, search_is_manager=search_is_manager) }}">下一页</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

<!-- 添加人员模态框 -->
<div class="modal fade" id="addStaffModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加项目负责人</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('staff.add_staff') }}" data-validate="true">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">姓名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" required placeholder="请输入姓名">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">所属项目</label>
                            <select class="form-select" name="project_name">
                                <option value="">请选择所属项目</option>
                                {% for project in projects %}
                                <option value="{{ project }}">{{ project }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">职务</label>
                            <select class="form-select" name="position">
                                <option value="">请选择职务</option>
                                <option value="组长">组长</option>
                                <option value="副组长">副组长</option>
                                <option value="成员">成员</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">具体职务</label>
                            <input type="text" class="form-control" name="specific_position" placeholder="请输入具体职务">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">项目级别</label>
                            <select class="form-select" name="project_level">
                                <option value="">请选择项目级别</option>
                                <option value="省一级">省一级</option>
                                <option value="市一级">市一级</option>
                                <option value="区县一级">区县一级</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">电话</label>
                            <input type="tel" class="form-control" name="phone" placeholder="请输入联系电话">
                        </div>
                        <div class="col-12">
                            <label class="form-label">负责客户</label>
                            <select class="form-select" name="customers" multiple>
                                {% for customer in customers %}
                                <option value="{{ customer }}">{{ customer }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">可选择多个客户（按住Ctrl键多选）</div>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_general_manager">
                                <label class="form-check-label">
                                    总经理
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-success">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑人员模态框 -->
<div class="modal fade" id="editStaffModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑项目负责人</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="editStaffForm" data-validate="true">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">姓名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" id="edit_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">所属项目</label>
                            <select class="form-select" name="project_name" id="edit_project_name">
                                <option value="">请选择所属项目</option>
                                {% for project in projects %}
                                <option value="{{ project }}">{{ project }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">职务</label>
                            <select class="form-select" name="position" id="edit_position">
                                <option value="">请选择职务</option>
                                <option value="组长">组长</option>
                                <option value="副组长">副组长</option>
                                <option value="成员">成员</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">具体职务</label>
                            <input type="text" class="form-control" name="specific_position" id="edit_specific_position" placeholder="请输入具体职务">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">项目级别</label>
                            <select class="form-select" name="project_level" id="edit_project_level">
                                <option value="">请选择项目级别</option>
                                <option value="A级">A级</option>
                                <option value="B级">B级</option>
                                <option value="C级">C级</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">电话</label>
                            <input type="tel" class="form-control" name="phone" id="edit_phone" placeholder="请输入电话号码">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">邮箱</label>
                            <input type="email" class="form-control" name="email" id="edit_email" placeholder="请输入邮箱">
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_general_manager" id="edit_is_general_manager">
                                <label class="form-check-label">
                                    是否为总经理
                                </label>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">负责客户</label>
                            <select class="form-select" name="customers" id="edit_customers" multiple>
                                {% for customer in customers %}
                                <option value="{{ customer }}">{{ customer }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">可选择多个客户（按住Ctrl键多选）</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">更新</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 确保函数在页面中可用
function toggleSelectAll(checkbox) {
    console.log('toggleSelectAll called');
    const checkboxes = document.querySelectorAll('input[type="checkbox"][name="selected_items"]');
    console.log('Found checkboxes:', checkboxes.length);
    
    checkboxes.forEach(cb => {
        cb.checked = checkbox.checked;
    });
    
    updateBatchButtons();
}

function updateBatchButtons() {
    console.log('updateBatchButtons called');
    const checkedBoxes = document.querySelectorAll('input[type="checkbox"][name="selected_items"]:checked');
    const batchButtons = document.querySelectorAll('.batch-operation-btn');
    
    console.log('Checked boxes:', checkedBoxes.length, 'Batch buttons:', batchButtons.length);
    
    batchButtons.forEach(btn => {
        console.log('Updating button, disabled:', checkedBoxes.length === 0);
        btn.disabled = checkedBoxes.length === 0;
    });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing...');
    updateBatchButtons();
});

// 编辑人员
function editStaff(staffId) {
    // 获取人员数据（这里简化处理，实际应该通过AJAX获取）
    const row = document.querySelector(`input[value="${staffId}"]`).closest('tr');
    const cells = row.cells;
    
    document.getElementById('edit_name').value = cells[1].textContent;
    document.getElementById('edit_project_name').value = cells[2].textContent === '-' ? '' : cells[2].textContent;
    document.getElementById('edit_position').value = cells[3].textContent === '-' ? '' : cells[3].textContent;
    document.getElementById('edit_specific_position').value = cells[4].textContent === '-' ? '' : cells[4].textContent;
    document.getElementById('edit_project_level').value = cells[5].textContent === '-' ? '' : cells[5].textContent;
    document.getElementById('edit_phone').value = cells[6].textContent === '-' ? '' : cells[6].textContent;
    document.getElementById('edit_is_general_manager').checked = cells[7].textContent.includes('是');
    
    // 设置表单action
    document.getElementById('editStaffForm').action = `/staff/edit/${staffId}`;
}

// 删除人员
function deleteStaff(staffId) {
    if (confirm('确定要删除这个人员吗？此操作不可撤销。')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/staff/delete/${staffId}`;
        document.body.appendChild(form);
        form.submit();
    }
}

// 批量删除
function batchDelete() {
    const selected = document.querySelectorAll('input[name="selected_items"]:checked');
    if (selected.length === 0) {
        alert('请选择要删除的人员');
        return;
    }
    
    if (confirm(`确定要删除选中的 ${selected.length} 个人员吗？此操作不可撤销。`)) {
        selected.forEach(checkbox => {
            deleteStaff(checkbox.value);
        });
    }
}

// 导出数据
function exportStaff() {
    window.location.href = '/export_staff';
}
</script>
{% endblock %}

